<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>坦克</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: relative;
        width: 1000px;
        height:400px;
        margin: 30px auto 0;
        border: 1px solid black;
    }

    div[class^="tank"]{
        position: absolute;
    }
    .tank {
        left:0;
        bottom:0;
        width: 400px;
        height:150px;
        border:1px dashed red;
        transition:all 3s linear;
    }
    .tank-head{
        top:0;
        left:80px;
        width:200px;
        height:100px;
        background-image: repeating-linear-gradient(green, #222 10%, green 10%);
        border-radius: 50%;
    }
    .tank-bullet {
        top:50%;
        right:-80px;
        width: 100px;
        height:20px;
        background-color:rgb(4, 46, 3) ;
        z-index:-1;
        transform: translateY(-50%) scale(0.5);
        transition: all .5s linear;
        transform-origin: 0 0;
    }
    .tank-body {
            top: 70px;
            left: 0;
            width: 350px;
            height: 80px;
            background-image: repeating-linear-gradient(green, #222 10%, green 10%);
            border-radius: 50px 50px 20px 20px;
        }
        .tank-foot{
            display: flex;
            justify-content: space-around;
            left:0;
            bottom:0;
            width:340px;
            height:40px;
            border-radius:20px;
            background-color: white;
            border:5px dashed rgba(0, 22, 0, .8);
        }
        .tank-foot>span{
            width: 40px;
            height:40px;
            border-radius:50%;
            background-image:repeating-linear-gradient(blue ,#222 10%, green 30%);
            transition: all 3s linear;
        }
        .box:active .tank{
            transform:translateX(600px);
        }
        .box:active .tank-foot>span {
            transform: rotate(3600deg)
        }
        .tank:hover .tank-bullet {
            transform: translateY(-50%) scale(1) rotate(-20deg);
            background-color: red;
        }
</style>
<body>
    <div class="box">
        <div class="tank">
            <div class="tank-head">
                <div class="tank-bullet"></div>
            </div>
            <div class="tank-body"></div>
            <div class="tank-foot">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

    </div>
</body>
</html>